<html ng-app>
<head>
<script type="text/javascript" src="../angular/angular.js"></script>


</head>
<body>

	<ul ng-controller = "StudentListController">
		<li ng-repeat = "student in students">
			{{$index + 1}} &nbsp;&nbsp;&nbsp;&nbsp; {{$middle}} &nbsp;&nbsp;&nbsp;&nbsp;<a href = "/student/view/{{student.id}}">{{student.name}}</a>
		</li>
		
		<button ng-click = "insertTom()">Insert</button>	
	</ul>
	
	

	<script type="text/javascript">
		var students = [ {
			name : 'Mary Contrary',
			id : '1'
		}, {
			name : 'Jack Spart',
			id : '2'
		}, {
			name : 'Jill Hill',
			id : '3'
		} ];

		function StudentListController($scope) {
			$scope.students = students;
			
			$scope.insertTom = function() {
				$scope.students.splice(1, 0, {name : 'Tom Bill', id : '4'});
			};
		}
		
		
		
	</script>

</body>
</html>